<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <link rel="icon" href="img/logo2.png">
    <title>iTasty - 搜巷子</title>
    <!-- <link rel="stylesheet" href="lib/bootstrap-4.0.0-dist/css/bootstrap.min.css"> -->
    <link href="https://cdn.bootcss.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="lib/city-picker.css" rel="stylesheet">
    <link href="lib/index.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>
    <div class="contenner">
        <div class="logo">
            <div id="logo-img">
                <img src="img/logo.png">
            </div>
            <div class="name">iTasty</div>
            <div class="descript">
                <h6>Good wine needs no bush</h6>
                <h4>酒香不怕巷子深</h4>
                <h6>构建于区块链的城市冷门美食搜集点！</h6>
            </div>
        </div>
        <div class="noExtension hide" id="noExtension">
            Oops...iTasty 需要 Chrome 浏览器并安装<a target="_blank" href="https://github.com/ChengOrangeJu/WebExtensionWallet">Nebulas钱包插件</a>才可正常使用。
        </div>
        <div class="row justify-content-center align-items-center" id=search-area>
            <div class="col-12 col-sm-10 col-md-8 col-lg-4 align-self-center" style="position: relative;">
                <!-- container -->
                <input readonly type="text" id=location data-toggle="city-picker" style="width:100%;">
            </div>
            <div class="col-12 col-sm-2 col-md-4 col-lg-4 align-self-center">
                <button type="button" class="search_btn btn btn-light btn-lg" id=search>搜巷子</button>
            </div>
        </div>
        <div class="row justify-content-center align-items-center" id="cards-area">
            <div class="card-deck-wrapper hide" id="cards-hub">
                <div class='card-deck' id='cards-deck'></div>
            </div>
        </div>
        <div class="row add-row justify-content-center align-items-center hide" id=add-area>
            <div class="col-12 col-sm-4" id="add-des">
                <h5 id="loading-text">载入中...</h5>
            </div>
            <div class="col-12 col-sm-3">
                <button type="button" class="add-btn btn btn-light btn-lg" id=add-btn>提供情报</button>
            </div>
        </div>
        <footer class="coding">
            <div class="row row-footer justify-content-center align-items-center">
                <div class="col-sm-12">
                    <h6><small>iTasty 是由 Greener-Dalii 基于Nebulas区块链技术构建的非盈利性的去中心化应用,所有代码已开源.</small></h6>
                    <h6><small>智能合约地址:n1fwkf7AgDvYDt8JM1q59W4DE7R6jokQTLE; 合约哈希:0bd1644419871dd89ec576f75d7e2245dea75f784e0795dcafbbf1c4abd0d03d</small></h6>
                </div>
                <div class="col-1 col-icon">
                    <a target="_blank" href="http://www.linkedin.com/in/greener-dalii"><i class="fa fa-linkedin-square fa-icon" aria-hidden="true"></i></a>
                </div>
                <div class="col-1 col-icon">
                    <a target="_blank" href="http://t.me/greenerdalii"><i class="fa fa-telegram fa-icon" aria-hidden="true"></i></a>
                </div>
                <div class="col-1 col-icon">
                    <i data-toggle="modal" data-target="#myModal7" class="fa fa-weixin fa-icon"></i>
                </div>
                <div class="col-1 col-icon">
                    <a href="mailto:654534332@qq.com"><i class="fa fa-envelope fa-icon" aria-hidden="true"></i></a>
                </div>
            </div>
            <div class="row row-footer justify-content-center align-items-center">
                <div class="col-sm-1 col-power">
                    <h6><small>Powered By</small></h6>
                </div>
                <div class="col-sm-1 col-icon">
                    <a target="_blank" href="https://nebulas.io/"><img id="nebulas-img"  src="img/Nebulas.png"></a>
                </div>
                <div class="col-sm-1 col-icon">
                    <a target="_blank" href="https://coding.me"><img id="coding-img" src="img/coding.png"></a>
                </div>
            </div>
        </footer>
    </div>
    <!-- Modal add-on -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>要使用 iTasty ,需使用Chrome浏览器并安装Nebulas钱包插件，安装完毕后刷新便可使用。</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="letitgo" data-dismiss="modal">算了吧</button>
                    <button type="button" class="btn btn-primary" onclick="window.open('https://github.com/ChengOrangeJu/WebExtensionWallet')">带我去安装钱包插件</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal no-result -->
    <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>嘿～这个地方的冷门美食还藏在巷子里呢,要不要提供情报来让大家发现它呢？</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="let-it-go">算了吧</button>
                    <button type="button" class="btn btn-primary" id="add-form-button">提供情报</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal no-location -->
    <div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>搜巷子需要具体到省市区/县哦</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">好的</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal wating -->
    <div class="modal fade" id="myModal4" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info" id="push-loading" role="alert">正准备将您的iTasty情报写入到区块链中永久保存...请确认Nebulas插件中交易信息并完成交易</div>
                    <!-- <div class="alert alert-success hide" id="push-success" role="alert">您的Tasty情报已成功写入区块链永久保存！</div> -->
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="push-ok-btn" data-dismiss="modal">好的</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal fail -->
    <div class="modal fade" id="myModal5" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger" id="push-fail" role="alert">写入区块链失败，用户取消操作或网络超时，请重试</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="push-ok-btn" data-dismiss="modal">好的</button>
                </div>
            </div>
        </div>
    </div>
    <!-- add form-->
    <div class="modal fade" id="myModal6" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myLargeModalLabel">提供iTasty情报</h4>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                        <span class="sr-only">Close</span>
                    </button>
                </div>
                <div class="modal-body">
                    <!-- Form -->
                    <div class="add-form" id="add-form">
                        <form>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="inputLocation">省/市/区(县)</label>
                                    <input type="text" class="form-control" id="inputLocation">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="inputStreet">街道地址</label>
                                    <input type="text" class="form-control" id="inputStreet" placeholder="输入街道或点击地图选择">
                                </div>
                            </div>
                            <div class="form-row row-map">
                                <div id="add-map"></div>
                                <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.2&key=6afd74f46ef9252cfba561a9cb134f25&callback=init"></script>
                                <!-- <script src=lib/map.js></script> -->
                                <script type="text/javascript">
                                    //map
                                    window.init = function () {
                                        var map = new AMap.Map('add-map', {
                                            resizeEnable: true,
                                            zoom: 13,
                                            // center: [116.39, 39.9]
                                        });
                                        // localStorage.setItem('AMap',JSON.stringify(AMap))
                                        // console.log('@@@@@',AMap)
                                        // localStorage.setItem('map', JSON.stringify(map))
                                        AMap.plugin('AMap.Geocoder', function () {
                                            var _city = $("#location").val().split('/')[1]
                                            var geocoder = new AMap.Geocoder({
                                                city: "",//城市，默认：“全国”
                                            });
                                            var marker = new AMap.Marker({
                                                map: map,
                                                bubble: true
                                            })
                                            geocoder.getLocation(_city, function (status, result) {
                                                if (status == 'complete' && result.geocodes.length) {
                                                    // console.log('MMMMM')
                                                    marker.setPosition(result.geocodes[0].location);
                                                    map.setCenter(marker.getPosition())
                                                    // document.getElementById('message').innerHTML = ''
                                                } else {
                                                    // console.log('NNNNNNNn')
                                                    // document.getElementById('message').innerHTML = '获取位置失败'
                                                }
                                            })
                                            var input = document.getElementById('inputStreet')
                                            map.on('click', function (e) {
                                                marker.setPosition(e.lnglat);
                                                geocoder.getAddress(e.lnglat, function (status, result) {
                                                    if (status == 'complete') {
                                                        input.value = result.regeocode.formattedAddress
                                                        // console('click:::Long-Lati:::',e.lnglat.getLng(),e.lnglat.getLat())
                                                        localStorage.setItem('add_lng', e.lnglat.getLng())
                                                        localStorage.setItem('add_lat', e.lnglat.getLat())
                                                    }
                                                })
                                            })
                                            input.onchange = function (e) {
                                                var address = input.value;
                                                geocoder.getLocation(address, function (status, result) {
                                                    if (status == 'complete' && result.geocodes.length) {
                                                        marker.setPosition(result.geocodes[0].location);
                                                        map.setCenter(marker.getPosition())
                                                        localStorage.setItem('add_lng', marker.getPosition().getLng())
                                                        localStorage.setItem('add_lat', marker.getPosition().getLat())
                                                        // console.log('iput::::',marker.getPosition().getLng(),marker.getPosition().getLat())
                                                    } else {

                                                    }
                                                })
                                            }
                                        });
                                    }
                                </script>
                            </div>
                            <div class="form-row">
                                <div class="form-group col-md-6">
                                    <label for="inputName">店名</label>
                                    <input type="email" class="form-control" id="inputName" placeholder="">
                                </div>
                                <div class="form-group col-md-6">
                                    <label for="inputCategory">所属类别</label>
                                    <select id="inputCategory" class="form-control">
                                        <option selected>主食</option>
                                        <option>小吃</option>
                                        <option>甜品</option>
                                        <option>饮品</option>
                                        <option>其他</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputRecommand">冷门美食名称</label>
                                <input type="text" class="form-control" id="inputRecommand" placeholder="若有多个，用空格隔开">
                            </div>
                            <div class="form-group">
                                <label for="inputTag">标签</label>
                                <input type="text" class="form-control" id="inputTag" placeholder="若有多个，用空格隔开，如：麻辣 川菜">
                            </div>
                            <button type="button" id="btn-submit" class="btn btn-primary btn-submit">提交</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- Modal wechat -->
    <div class="modal fade" id="myModal7" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
            <div class="modal-dialog modal-sm" role="document">
                <div class="modal-content" id='wx-modal'>
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-body" id="wx-body">
                        <img id="wx-img" src="img/wx.jpg">
                    </div>
                </div>
            </div>
    </div>
    <!-- Modal success -->
    <div class="modal fade" id="myModal8" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-success" id="push-succes" role="alert">写入区块链成功，稍后区块同步后便可永久保存。</div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" id="push-ok-btn" data-dismiss="modal">好的</button>
                </div>
            </div>
        </div>
    </div>
    <p id="back-top">
        <a href="#top">
            <i class="fa fa-angle-up"></i>
        </a>
    </p>
    <!-- <script src=lib/jquery-3.3.1.min.js></script> -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src=lib/nebPay.js></script>
    <!-- <script src=lib/bootstrap-4.0.0-dist/js/bootstrap.min.js></script> -->
    <script src="https://cdn.bootcss.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src=lib/pages.js></script>
    <script src=lib/city-picker.data.min.js></script>
    <script src=lib/city-picker.min.js></script>
    <script src=lib/nebAction.js></script>
</body>

</html>